<template>
  <div class="contact-us">
    <div class="position">
      <span>当前位置&gt;<a href="javascript:void(0);">联系我们</a></span>
    </div>
    <div class="contact-way">
      <subtitle zhTitle="联系方式" :lineSpace=5></subtitle>
      <div class="way-list">
        <div class="way-item">
          <td>
            <tr class="way-icon icon-phone"></tr>
            <tr class="way-text">联系客服</tr>
            <tr class="contact">0571-382626235</tr>
          </td>
        </div>
        <div class="way-item">
          <td>
            <tr class="way-icon icon-email"></tr>
            <tr class="way-text">企业邮箱</tr>
            <tr class="contact">2048553551@163.com</tr>
          </td>
        </div>
        <div class="way-item">
          <td>
            <tr class="way-icon icon-QQ"></tr>
            <tr class="way-text">客服QQ</tr>
            <tr class="contact">382626235</tr>
          </td>
        </div>
        <div class="way-item">
          <td>
            <tr class="way-icon icon-address"></tr>
            <tr class="way-text">公司地址</tr>
            <tr class="contact">杭州市西湖区三墩镇汇禾领府</tr>
          </td>
        </div>
      </div>
    </div>
    <div class="company-map">
      <subtitle zhTitle="公司地图" :lineSpace=5></subtitle>
      <div id="allmap" class="allmap"></div>
    </div>
    <div class="opinion">
      <subtitle zhTitle="意见反馈" :lineSpace=5></subtitle>
      <div class="info">
        <div class="info-item">
          <span>姓名</span><input type="text" v-model="opinion.name">
        </div>
        <div class="info-item">
          <span>手机号</span><input type="text" v-model="opinion.phone">
        </div>
        <div class="info-item">
          <span>邮箱号</span><span></span><input type="text" v-model="opinion.eamil">
        </div>
      </div>
      <div class="opinion-text-wrap">
        <textarea class="opinion-text" placeholder="请对我们说些什么吧" maxlength="500" v-model="opinion.opinionText"></textarea>
        <span class="words-num">还能输入{{500-opinion.opinionText.length}}字</span>
      </div>
      <a href="javascript:void(0);" class="send-out">完成并发送</a>
    </div>
    <div class="recruit">
      <subtitle zhTitle="人才招聘" :lineSpace=5></subtitle>
      <div class="recruit-list">
        <swiper :options="swiperOption" ref="mySwiper">
          <swiper-slide v-for="(list, index) in recruitList" :key="index">
            <div class="recruit-item" v-for="(item, index2) in list" :key="index2">
              <tr>
                <th>{{item.quarters}}<span>{{item.date}}</span></th>
              </tr>
              <tr>
                <td>职位名称：{{item.quarters}}</td>
                <td>工作年限：{{item.working_years}}</td>
              </tr>
              <tr>
                <td>最低学历：{{item.education}}</td>
                <td>月薪：{{item.month_salary}}</td>
              </tr>
              <tr>
                <td>招聘人数：{{item.number}}</td>
                <td>年龄：{{item.age}}</td>
              </tr>
              <tr>
                <td><a href="javascript:void(0);" @click="popupItem = item;popupDisplay = true;">查看详情</a></td>
              </tr>
            </div>
          </swiper-slide>
        </swiper>
        <div class="swiper-pagination"></div>
        <!-- 招聘详情信息 -->
        <div class="recruit-popup-wrap" v-show="popupDisplay" >
          <div class="recruit-popup">
            <i class="close" @click="popupDisplay = false"></i>
            <div class="title">人才招聘</div>
            <div class="recruit-content">
              <tr>
                <th>{{popupItem.quarters}}<span>{{popupItem.date}}</span></th>
              </tr>
              <tr>
                <td>职位名称：{{popupItem.quarters}}</td>
                <td>工作年限：{{popupItem.working_years}}</td>
              </tr>
              <tr>
                <td>最低学历：{{popupItem.education}}</td>
                <td>月薪：{{popupItem.month_salary}}</td>
              </tr>
              <tr>
                <td>招聘人数：{{popupItem.number}}</td>
                <td>年龄：{{popupItem.age}}</td>
              </tr>
              <tr>
                <td class="demand">岗位需求：这是一个招聘条件，招聘条件，有什么要求尽管提这是一个招聘条件，招聘条件，有什么要求尽管提这是一个招聘条件，招聘条件，有什么要求尽管提这是一个招聘条件，招聘条件，有什么要求尽管提这是一个招聘条件，招聘条件，有什么要求尽管提这是一个招聘条件，招聘条件，有什么要求尽管提这是一个招聘条件，招聘条件，有什么要求尽管提这是一个招聘条件，招聘条件，有什么要求尽管提</td>
              </tr>
              <tr class="eamil">
                有意者请将简历投至邮箱<span style="color:#e02016;">1667754159@qq.com</span>
              </tr>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div> 
</template>

<script>
  import BMap from 'BMap'
  import subtitle from 'COMPS/subtitle.vue'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import 'swiper/dist/css/swiper.css'

  export default {
    name: 'contact-us',
    components: {
      subtitle,
      swiper,
      swiperSlide
    },
    data() {
      return {
        type: 'tab',
        address_detail: null,
        center: {lng:120.078203, lat:30.327711},
        popupDisplay: false,
        popupItem: {},
        opinion: {
          name: '',
          phone: '',
          email: '',
          opinionText: ''
        },
        recruitList: [],
        swiperOption: {
          observer:true,
          observeParents:true,
          autoplay: false,
          pagination: {
            el: '.swiper-pagination',
            type: 'bullets'
          }
        }
      }
    },
    mounted () {
      this.ready();
      this.getRecruitList();
    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper;
      }
    },
    methods: {
      ready () {
        // 创建地图实例
        let map = new BMap.Map('allmap')
        // 创建坐标点
        let point = new BMap.Point(this.center.lng, this.center.lat)
        // 初始化地图，设置中心点坐标和地图级别
        map.centerAndZoom(point, 20)
        // 开启鼠标滚轮缩放
        map.enableScrollWheelZoom(true)
        map.enableDoubleClickZoom(true)
        // 绘制地图 好像没用
        // var geolocation = new BMap.Geolocation()
        // geolocation.getCurrentPosition((r) => {
        //   if (r.point) {
        //     this.center.lng = r.longitude
        //     this.center.lat = r.latitude
        //     let markers = new BMap.Marker(r.point)
        //     map.addOverlay(markers)
        //     map.panTo(r.point)
        //     map.centerAndZoom(r.point, 16)
        //   }
        // }, { enableHighAccuracy: true })
      },
      getRecruitList() {
        let that = this;
        if (window.DEBUGGING) {
          return new Promise((resolve) => {
            resolve([{
              quarters: '前端工程师1',
              date: '2018-05-12',
              working_years: '3-5年',
              education: '全日制本科及以上',
              month_salary: '8000-12000(税前)',
              number: '5',
              age: '18及以上'
            },{
              quarters: '后端工程师2',
              date: '2018-05-12',
              working_years: '3-5年',
              education: '全日制本科及以上',
              month_salary: '8000-12000(税前)',
              number: '5',
              age: '18及以上'
            },{
              quarters: '前端工程师3',
              date: '2018-05-12',
              working_years: '3-5年',
              education: '全日制本科及以上',
              month_salary: '8000-12000(税前)',
              number: '5',
              age: '18及以上'
            },{
              quarters: '前端工程师4',
              date: '2018-05-12',
              working_years: '3-5年',
              education: '全日制本科及以上',
              month_salary: '8000-12000(税前)',
              number: '5',
              age: '18及以上'
            },{
              quarters: '前端工程师5',
              date: '2018-05-12',
              working_years: '3-5年',
              education: '全日制本科及以上',
              month_salary: '8000-12000(税前)',
              number: '5',
              age: '18及以上'
            },{
              quarters: '后端工程师6',
              date: '2018-05-12',
              working_years: '3-5年',
              education: '全日制本科及以上',
              month_salary: '8000-12000(税前)',
              number: '5',
              age: '18及以上'
            },{
              quarters: '前端工程师7',
              date: '2018-05-12',
              working_years: '3-5年',
              education: '全日制本科及以上',
              month_salary: '8000-12000(税前)',
              number: '5',
              age: '18及以上'
            },{
              quarters: '前端工程师8',
              date: '2018-05-12',
              working_years: '3-5年',
              education: '全日制本科及以上',
              month_salary: '8000-12000(税前)',
              number: '5',
              age: '18及以上'
            }])
          }).then((data) => {
            // that.recruitList = data;
            for(let i = 0; i < data.length; i += 4) {
              console.log(1111);
              that.recruitList.push(data.slice(i, i+4));
            }
            console.log(that.recruitList);
          })
        }
      }
    }
  }
</script>

<style lang="less">
  @import '~COMMON/common.less';

  .contact-us {
    text-align: center;
    .position {
      text-align: left;
    }
    .subtitle {
      margin-bottom: 50px;
      .zh-title {
        color: #000;
      }
    }
    .contact-way {
      margin-top: 50px;
      margin-bottom: 100px;
      .way-list {
        display: table;
        .way-item {
          display: table-cell;
          color: #666;
          >td {
            >tr {
              display: inline-block;
              width: 300px;
            }
            .icon-phone {
              background-image: url(~IMGS/phone-icon.png);
            }
            .icon-email {
              background-image: url(~IMGS/email-icon.png);
            }
            .icon-QQ {
              background-image: url(~IMGS/QQ-icon.png);
            }
            .icon-address {
              background-image: url(~IMGS/address-sign-icon.png);
            }
            .way-icon {
              display: inline-block;
              width: 70px;
              height: 70px;
              background-size: 100%;
            }
            .way-text {
              font-size: 18px;
              font-weight: bold;
              margin: 10px 0;
            }
          }
        }
      }
    }
    .company-map {
      margin-bottom: 100px;
      .allmap {
        width: 100%;
        height: 460px;
      }
    }
    .opinion {
      text-align: center;
      margin-bottom: 100px;
      .info {
        .info-item {
          display: inline-block;
          width: 300px;
          margin-right: 50px;
          background-color: #f0f0f0;
          &:nth-last-of-type(1) {
            margin-right: 0px;
          }
          >span {
            line-height: 46px;
            margin-right: 10px;
            color: #999;
          }
          >input {
            outline: none;
            border: none;
            height: 46px;
            width: 210px;
            font-size: 16px;
            background-color: #f0f0f0;
          }
        }
      }
      .opinion-text-wrap {
        position: relative;
        margin: 50px auto;
        width: 1000px;
        .opinion-text {
          box-sizing: border-box;
          width: 100%;
          height: 200px;
          padding: 15px 20px;
          font-size: 16px;
          font-family: MicrosoftYaHei;
          line-height: 24px;
          outline: none;
          resize:none;
          border: solid 1px #dcdcdc;
        }
        .words-num {
          position: absolute;
          bottom: 20px;
          right: 20px;
          color: #999;
        }
      }
      .send-out {
        display: inline-block;
        width: 250px;
        line-height: 46px;
        color: #fff;
        background-color: #47beda;
        &:hover {
          background-color: #6cd3eb;
        }
      }
    }
    .recruit {
      width: 100%;
      padding: 0 20px;
      .subtitle {
        margin-bottom: 30px;
      }
      .recruit-list {
        .swiper-pagination {
          position: static;
          margin-top: 20px;
          .swiper-pagination-bullet {      
            width: 14px;
            height: 14px;
            margin-right: 15px;
            border: solid 1px #47beda;
            background-color: #fff;
            &.swiper-pagination-bullet-active {
              background-color: #47beda;
            }
          }
        }
        .recruit-item {
          display: inline-block;
          box-sizing: border-box;
          width: 560px;
          height: 300px;
          margin: 10px;
          padding: 30px 0 0 30px;
          border: solid 1px #dcdcdc;
          transition: all 0.2s;
          &:hover {
            background-color: #f9f9f9;
            box-shadow: 0px 2px 6px 0px rgba(153, 153, 153, 0.35);
          }
        }
        .recruit-item,
        .recruit-content {
          >tr {
            width: 100%;
            display: table;
            >th>span {
              font-size: 14px;
              margin-left: 15px;
              color: #333;
              font-weight: normal;
            }
            >th {
              text-align: left;
              line-height: 50px;
            }
            >td {
              text-align: left;
              line-height: 42px;
              width: 50%;
              color: #666;
              >a {
                display: inline-block;
                width: 140px;
                line-height: 40px;
                margin-top: 30px;
                text-align: center;
                color: #fff;  
                background-color: #47beda;
                &:hover {
                  background-color: #6cd3eb;
                }
              }
            }
          }
        }
        .recruit-popup-wrap {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0,0,0,0.3);
          z-index: 998;
          .recruit-popup {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-sizing: border-box;
            width: 800px;
            height: 640px;
            padding: 30px 50px;
            text-align: center;
            border-radius: 5px;
            box-shadow: 0px 2px 13px 0px rgba(0, 0, 0, 0.35);
            background-color: #fff;
            z-index: 999;
            .close {
              .Round(24px);
              cursor: pointer;
              float: right;
              margin-right: -20px;
              display: inline-block;
              background-image: url(~IMGS/circle-close.png);
              background-size: 100%;
            }
            .title {
              line-height: 72px;
              font-size: 24px;
              border-bottom: 1px solid #e5e5e5;
            }
            .recruit-content {
              padding-top: 20px;
              padding-bottom: 30px;
              border-bottom: 1px solid #e5e5e5;
              .demand {
                padding-top: 10px;
                line-height: 28px;
              }
              .eamil {
                margin-top: 35px;
                text-align: left;
              }
            }
          }
        }
      }
    }
  }
</style>